<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<title>国长国漫</title>
<link rel="stylesheet" href="../../../template/assets/css/amazeui.min.css"/>
<link rel="stylesheet" href="../../../template/website/css/app.css"/>
<link rel="stylesheet" href="../../../template/assets/css/font-awesome.css">
<style type="text/css">
  .topbar {
    background: none;
    border-width:0 0 0 0;
 }
 h3{
 margin:0 0 0 ;
 }
</style>
</head>
<body>
  <div class="am-g am-list" id="step_one" > 
  
  <div class="am-u-sm-12 am-text-center am-padding-vertical-xs" id="summary">
     <h2  id="title">业务介绍</h2>
  </div>
  
  <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
  
  <div class="am-u-sm-12 am-padding-vertical" id="content">
     <div>
                                业务名称：办理国长国漫业务
     </div>
     <div>
                                业务介绍：查询并更改用户的业务
     </div>
     <div>
                                描述：在下框输入客户手机号码点“发送验证码”，系统会发短信验证码到客户手机，输入验证码后点“验证”即可进行业务办理
     </div>
                            
  </div>
  
  <div class=" am-g am-topbar am-topbar-fixed-bottom am-padding-vertical-xs">
  
  <div class="am-u-sm-12 am-input-group am-padding-horizontal">
      <input type="number" class="am-form-field" id="phone" placeholder="请输入业务办理的手机号码"  />
      <span class="am-input-group-label"><i class="fa fa-mobile am-icon-xs"></i></span>
  </div>
    
  <div class="am-u-sm-12 am-padding-vertical-xs am-padding-horizontal">
   <div class="am-u-sm-5" style="padding-left:0;">
      <button type="button" class="am-btn am-btn-default" id="getSMS">发送验证码</button> 
   </div>
   <div class="am-u-sm-7 am-input-group" style="padding-right:0">
       <input id="smscode" class="am-form-field" value="" placeholder="验证码"  />
        <span class="am-input-group-label"><i class="fa fa-lock am-icon-xs"></i></span>
   </div>
  </div>
  
  <div class="am-u-sm-12 am-padding-horizontal">
      <button type="button"  class="am-btn am-btn-block  am-btn-primary" id="validate">验  证</button> 
  </div>
     
  </div>
  
</div>

<div class="am-g am-list am-padding-vertical-xs am-hide" id="step_two" > 
  <div class="am-u-sm-12 am-text-center" id="summary">
     <h2  id="title">办理国长国漫业务</h2>
  </div>
  <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
  <div class="am-u-sm-12 am-padding-vertical-xs" >
     <div>
                                当前办理号码：<span id="cellphone"></span>
     </div>
     <div>
                               用户当前的国长国漫状态：
     </div>                            
  </div>
  
   <div class="am-u-sm-12 am-padding-horizontal am-padding-vertical-xs" >
   <ul class= "am-list  am-list-border" >
              <li class="am-g am-padding-vertical-xs"  >
                <div class="am-u-sm-3 am-padding-vertical-xs">
                    <h3>国际直拨</h3>
                </div>
                
                <div class="am-u-sm-6 am-padding-vertical-xs">
                    <div id="gc_status"></div>
                </div>
                <div class="am-u-sm-3  am-text-right am-padding-vertical-xs">
                  <button type="button" class="am-btn-block am-btn am-btn-sm  am-btn-secondary" id="gc_submit" >开通</button> 
                </div>
              </li>
              
               <li class="am-g am-padding-vertical-xs"  >
                <div class="am-u-sm-3 am-padding-vertical-xs">
                    <h3>国际漫游</h3>
                </div>
                
                <div class="am-u-sm-6 am-padding-vertical-xs">
                    <div id="gm_status"></div>
                </div>
                <div class="am-u-sm-3  am-text-right am-padding-vertical-xs">
                  <button type="button" class="am-btn-block am-btn  am-btn-sm am-btn-secondary"  id="gm_submit" >开通</button> 
                </div>
              </li>
      </ul>  
   </div>
   
   
   <div class="am-u-sm-12 am-padding-horizontal am-padding-vertical-sm am-hide" id="request_open" >
        <ul class= "am-list  am-list-border" >
              <li class="am-g am-padding-vertical-xs"  >
                <div class="am-u-sm-12 am-padding-vertical-xs">
                    <h3>请选择开通多少个月:</h3>
                </div>
                
                <div class="am-u-sm-12 am-padding-vertical-xs">
                   <select class="am-form-field" id="openDays" data-am-selected="{btnWidth: '100%'}">
                    <option value="1" selected>1个月</option>
                    <option value="2">2个月</option>
                    <option value="3" >3个月</option>
                    <option value="4" >4个月</option>
                    <option value="5" >5个月</option>
                    <option value="6" >6个月</option>
                    <option value="7" >7个月</option>
                    <option value="8" >8个月</option>
                    <option value="9" >9个月</option>
                    <option value="10" >10个月</option>
                    <option value="11" >11个月</option>
                   </select>
                </div>
              </li>
      </ul>  
      <div class="am-u-sm-12 am-padding-vertical-xs am-padding-horizontal">
        <div class="am-u-sm-6">
            <button type="button" class="am-btn  am-btn-secondary" id="confirmOpen">确认开通</button> 
        </div>
        <div class="am-u-sm-6">
            <button type="button" class="am-btn  am-btn-secondary" id="cancel">取&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp消</button> 
        </div>
   </div>
   </div>
   
    <div class="am-u-sm-12 am-padding-horizontal am-padding-vertical-sm am-hide" id="request_close" >
        <button type="button" class="am-btn  am-btn-secondary am-btn-block" id="close">点击关闭国际直拨业务</button> 
    </div>
  
    <div class="am-g am-list am-padding-horizontal am-padding-vertical-xl" id="msg"> 
        <div class=" am-g am-padding-horizontal am-padding-vertical-xl am-text-center am-hide" id="loadingbar">
         <i class="am-icon-spinner am-icon-spin" aria-hidden="true"></i>&nbsp&nbsp
        </div>
     </div>
  
</div>
 
 
 <div class="am-modal am-modal-confirm" tabindex="-1" id="myConfirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd"></div>
    <div class="am-modal-bd" id="modal_msg">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
      <span class="am-modal-btn" data-am-modal-cancel >取消</span>
    </div>
  </div>
</div>
  

  
  <script type="text/javascript" src="../../../template/assets/js/jquery.min.js"></script>
  <script type="text/javascript" src="../../../template/assets/js/amazeui.min.js"></script>
  <script type="text/javascript" src="../../../template/assets/js/handlebars.min.js"></script>
  <script type="text/javascript" src="../../../template/assets/js/amazeui.widgets.helper.min.js"></script>
  <script type="text/javascript" src="../../../template/website/js/app.js"></script>
  <script type="text/javascript" src="../../../template/website/js/goventerprise/esop/gcgm.js"></script>

</body>
</html>